<template>
    <div class="wages">
      <Layout :style="{padding: '0 24px 24px'}">
        <Breadcrumb :style="{margin: '24px 0'}">
          <BreadcrumbItem><a href="javascript:void(0)" @click="jump('/index')">首页</a></BreadcrumbItem>
          <BreadcrumbItem>财务管理</BreadcrumbItem>
          <BreadcrumbItem>工资核算</BreadcrumbItem>
        </Breadcrumb>
        <Content id="tal" :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
          <div class="f-header" ghost>
            <div class="f-header-search">
              <span>搜索条件：</span>
              <Input v-model="search" placeholder="请输入员工姓名..." style="width: 300px"></Input>
              <Button @click="toSearch"><Icon type="md-search" />搜索</Button>
            </div>
            <Button @click="addDrawer=true"><Icon type="md-add" />新增</Button>
            <Button @click="toRefresh"><Icon type="md-sync" />刷新</Button>
            <Button type="primary" @click="toDown"><Icon type="md-download" />导出</Button>
          </div>
          <div class="hr-content" style="width: 100%;height: 72vh;overflow: hidden;margin-top: 1%">
            <div style="overflow-y:scroll;width: 101.5%;height: 100%;margin-right: -20px">
              <Table :loading="loading"   :height="666" :columns="tb_columns" :data="wages_list" size="small" red="table"></Table>
              <Page :total="wages_total" :current="wages_current_page" :page-size="wages_page_size" @on-change="onChange" @on-page-size-change="onPageSizeChange" show-total show-sizer size="small" style="float:right;margin-top:12px"/>
            </div>
          </div>
        </Content>
      </Layout>
      <Drawer title="新增工作核算记录" :closable="false" v-model="addDrawer" width="40" :mask-closable="false">
        <Form ref="addForm" :model="addForm" :rules="addRuleVal" :label-width="140">
          <FormItem label="员工：" prop="staffName">
            <Select v-model="addForm.staffName" @on-change="toMoney" style="width:100%" placeholder="请选择员工...">
              <Option v-for="(item,key) in staff_list" :key="key" :value="item.id+','+item.name">{{item.name}}</Option>
            </Select>
          </FormItem>
          <FormItem label="工资期数：" prop="periods">
            <DatePicker type="month" v-model="addForm.periods" @on-change="toMoney" placeholder="请选择工资期数..." style="width: 100%"></DatePicker>
          </FormItem>
          <FormItem label="固定工资(元)："  prop="fixedSalary">
            <Input v-model="addForm.fixedSalary" disabled placeholder="选择员工后自动生成..."></Input>
          </FormItem>
          <FormItem label="计件工资(元)：" prop="pieceAmount">
            <Input v-model="addForm.pieceAmount" placeholder="请输入计件工资..."></Input>
          </FormItem>
          <FormItem label="计件工资说明：" prop="pieceDesc">
            <Input type="textarea" :rows="4" v-model="addForm.pieceDesc" placeholder="请输入计件工资说明..."></Input>
          </FormItem>
          <FormItem label="扣款工资(元)：" prop="deductionAmount">
            <Input v-model="addForm.deductionAmount" placeholder="请输入扣款工资..."></Input>
          </FormItem>
          <FormItem label="扣款工资说明：" prop="deductionDesc">
            <Input type="textarea" :rows="4" v-model="addForm.deductionDesc" placeholder="请输入扣款工资说明..."></Input>
          </FormItem>
          <FormItem label="补贴工资(元)：" prop="subsidy">
            <Input v-model="addForm.subsidy" placeholder="请输入补贴工资..."></Input>
          </FormItem>
          <FormItem label="补贴工资说明：" prop="subsidyDesc">
            <Input type="textarea" :rows="4" v-model="addForm.subsidyDesc" placeholder="请输入补贴工资说明..."></Input>
          </FormItem>
        </Form>
        <div class="demo-drawer-footer">
          <Button type="primary" @click="handleSubmit('addForm')">提交</Button>
          <Button @click="handleReset('addForm')" style="margin-left: 8px">取消</Button>
        </div>
      </Drawer>
      <Drawer title="修改作核算记录" :closable="false" v-model="updateDrawer" width="40" :mask-closable="false">
        <Form ref="addForm" :model="addForm" :rules="addRuleVal" :label-width="140">
          <FormItem label="员工姓名：">
            <Input v-model="addForm.staffName" disabled ></Input>
          </FormItem>
          <FormItem label="工资期数：">
            <Input v-model="addForm.periods" disabled ></Input>
          </FormItem>
          <FormItem label="固定工资(元)：" >
            <Input v-model="addForm.fixedSalary" disabled ></Input>
          </FormItem>
          <FormItem label="计件工资(元)：" prop="pieceAmount">
            <Input v-model="addForm.pieceAmount" placeholder="请输入计件工资..."></Input>
          </FormItem>
          <FormItem label="计件工资说明：" prop="pieceDesc">
            <Input type="textarea" :rows="4" v-model="addForm.pieceDesc" placeholder="请输入计件工资说明..."></Input>
          </FormItem>
          <FormItem label="扣款工资(元)：" prop="deductionAmount">
            <Input v-model="addForm.deductionAmount" placeholder="请输入扣款工资..."></Input>
          </FormItem>
          <FormItem label="扣款工资说明：" prop="deductionDesc">
            <Input type="textarea" :rows="4" v-model="addForm.deductionDesc" placeholder="请输入扣款工资说明..."></Input>
          </FormItem>
          <FormItem label="补贴工资(元)：" prop="subsidy">
            <Input v-model="addForm.subsidy" placeholder="请输入补贴工资..."></Input>
          </FormItem>
          <FormItem label="补贴工资说明：" prop="subsidyDesc">
            <Input type="textarea" :rows="4" v-model="addForm.subsidyDesc" placeholder="请输入补贴工资说明..."></Input>
          </FormItem>
        </Form>
        <div class="demo-drawer-footer">
          <Button type="primary" @click="handleSubmit2('addForm')">提交</Button>
          <Button @click="handleReset('addForm')" style="margin-left: 8px">取消</Button>
        </div>
      </Drawer>
    </div>
</template>

<script>
  import {mapGetters, mapActions} from 'vuex';
  import {toGet,toPost} from "../../utils/MyAxios";
    export default {
        name: "wages",
      data() {
        return {
          search:'',
          updateDrawer:false,
          addForm:{},
          loading:false,
          addDrawer:false,
          addRuleVal:{
            staffName: [
              { required: true, message: '请选择员工', trigger: 'blur' }
            ],
            fixedSalary: [
              { required: true, message: '请选择固定工资', trigger: 'blur' }
            ],
            periods: [
              { required: true, message: '请选择工资期数', trigger: 'blur' }
            ],
            deductionAmount: [
              { required: true, message: '请输入扣款金额', trigger: 'blur' }
            ],
            deductionDesc: [
              { required: true, message: '请输入扣款原因说明', trigger: 'blur' }
            ],
            pieceAmount: [
              { required: true, message: '请输入计件工资', trigger: 'blur' }
            ],
            pieceDesc: [
              { required: true, message: '请输入计件工资说明', trigger: 'blur' }
            ],
            subsidy: [
              { required: true, message: '请输入补贴工资', trigger: 'blur' }
            ],
            subsidyDesc: [
              { required: true, message: '请输入补贴工资说明', trigger: 'blur' }
            ],
          },
          tb_columns: [
            {
              title: '员工姓名',
              key: 'staffName',
              align: 'center'
            },
            {
              title: '固定工资(元)',
              key: 'fixedSalary',
              align: 'center'
            },
            {
              title: '工资期数',
              key: 'periods',
              align: 'center'
            },
            {
              title: '扣款金额(元)',
              key: 'deductionAmount',
              align: 'center'
            },
            {
              title: '扣款原因说明',
              key: 'deductionDesc',
              align: 'center'
            },
            {
              title: '计件金额(元)',
              key: 'pieceAmount',
              align: 'center'
            },
            {
              title: '计件工资说明',
              key: 'pieceDesc',
              align: 'center'
            },
            {
              title: '补贴(元)',
              key: 'subsidy',
              align: 'center'
            },
            {
              title: '补贴说明',
              key: 'subsidyDesc',
              align: 'center'
            },
            {
              title: '操作',
              align: 'center',
              render: (h, params) => {
                return h('div', [
                  h('Button', {
                    props: {
                      icon: 'md-create',
                      size: 'small'
                    },
                    style: {
                      color: 'black',
                    },
                    on: {
                      click: () => {
                        this.toUpdate(params.row.id)
                      }
                    }
                  }),
                ]);
              }
            }
          ],
        }
      },
      computed: {
        ...mapGetters(['staff_list','wages_list','wages_total','wages_current_page','wages_page_size']),
      },
      methods: {
        ...mapActions(['getWagesList','getStaffList']),
        onChange(currentPage){
          this.getWagesList({
            'search':this.search,
            'currentPage':currentPage*1,
            'pageSize':this.wages_page_size
          });
        },
        jump(e){
          this.$router.push(e);
        },
        toMoney(){
          if(this.addForm.staffName && this.addForm.periods){
            let date = new Date(this.addForm.periods);
            this.addForm.periods=date.getFullYear() + '-' + (date.getMonth() + 1);
            let params = {
              id:this.addForm.staffName.split(',')[0],
              time:this.addForm.periods
            };
            toGet('/finance-management/finance/wages/money/'+JSON.stringify(params))
              .then(res=>{
                if (res.resultCode === 0) {
                  this.addForm.fixedSalary=res.data.fixedSalary;
                  this.addForm.pieceDesc=res.data.pieceDesc;
                }
              });
          }
        },
        toUpdate(id){
          toGet('/finance-management/finance/wages/queryOne/'+id)
            .then(res=>{
              if (res.resultCode === 0) {
                this.addForm=res.data;
                this.updateDrawer=true;
              }else{
                this.$Notice.warning({
                  title: '获取信息失败',
                  desc: '服务器发生未知错误'
                });
              }
            });
        },
        handleSubmit (name) {
          this.$refs[name].validate((valid) => {
            if (valid) {
              if(this.addForm.periods){
                this.loading=true;
                let date = new Date(this.addForm.periods);
                this.addForm.periods=date.getFullYear() + '-' + (date.getMonth() + 1);
                let params = {
                  userId:this.addForm.staffName.split(',')[0],
                  staffName:this.addForm.staffName.split(',')[1],
                  periods:this.addForm.periods,
                  fixedSalary:this.addForm.fixedSalary,
                  deductionAmount:this.addForm.deductionAmount,
                  deductionDesc:this.addForm.deductionDesc,
                  pieceAmount:this.addForm.pieceAmount,
                  pieceDesc:this.addForm.pieceDesc,
                  subsidy:this.addForm.subsidy,
                  subsidyDesc:this.addForm.subsidyDesc,
                };
                toPost('/finance-management/finance/wages/add',params)
                  .then(res=>{
                    if (res.resultCode === 0) {
                      this.$Notice.success({
                        title: '新增成功'
                      });
                      this.$refs[name].resetFields();
                      this.toRefresh();
                      this.addDrawer=false;
                    }else{
                      this.$Notice.error({
                        title: '新增失败',
                        desc: '服务器发生未知错误'
                      })
                    }
                  });
                this.loading=false;
              }else{
                this.$Notice.warning({
                  title: '请选择工资期数',
                })
              }

            }
          })
        },
        handleSubmit2 (name) {
          this.$refs[name].validate((valid) => {
            if (valid) {
              if(this.addForm.periods){
                this.loading=true;
                let date = new Date(this.addForm.periods);
                this.addForm.periods=date.getFullYear() + '-' + (date.getMonth() + 1);
                let params = {
                  id:this.addForm.id,
                  userId:this.addForm.staffName.split(',')[0],
                  staffName:this.addForm.staffName.split(',')[1],
                  periods:this.addForm.periods,
                  fixedSalary:this.addForm.fixedSalary,
                  deductionAmount:this.addForm.deductionAmount,
                  deductionDesc:this.addForm.deductionDesc,
                  pieceAmount:this.addForm.pieceAmount,
                  pieceDesc:this.addForm.pieceDesc,
                  subsidy:this.addForm.subsidy,
                  subsidyDesc:this.addForm.subsidyDesc,
                };
                toPost('/finance-management/finance/wages/update',params)
                  .then(res=>{
                    if (res.resultCode === 0) {
                      this.$Notice.success({
                        title: '更新成功'
                      });
                      this.$refs[name].resetFields();
                      this.toRefresh();
                      this.updateDrawer=false;
                    }else{
                      this.$Notice.error({
                        title: '更新失败',
                        desc: '服务器发生未知错误'
                      })
                    }
                  });
                this.loading=false;
              }else{
                this.$Notice.warning({
                  title: '请选择工资期数',
                })
              }

            }
          })
        },
        handleReset (name) {
          this.addDrawer=false;
          this.updateDrawer=false;
          this.$refs[name].resetFields();
        },
        toRefresh(){
          this.getWagesList({
            'search':this.search,
            'currentPage':this.wages_current_page,
            'pageSize':this.wages_page_size
          });
        },
        toDown(){
          swal({
            title: "您确认导出工作核算表数据吗？",
            icon: "info",
            buttons: ["取消", "确认下载"],
          })
            .then((willDown) => {
              if (willDown) {
                if(this.wages_list.length>0){
                  this.$refs.table.exportCsv({
                    filename: '工作核算表数据('+this.formatDate(new Date().toDateString())+')'
                  });
                }else{
                  swal("无法导出!", "表格暂无数据!", "error");
                }
              }
            });
        },
        onPageSizeChange(pageSize){
          this.getWagesList({
            'search':this.search,
            'currentPage':this.wages_current_page,
            'pageSize':pageSize*1
          });
        },
        toSearch(){
          this.getWagesList({
            'search':this.search,
            'currentPage':this.wages_current_page,
            'pageSize':this.wages_page_size
          });
        },
      },
      mounted() {
        this.getWagesList({
          'search':this.search,
          'currentPage':this.wages_current_page,
          'pageSize':this.wages_page_size
        });
        this.getStaffList({
          'search':'',
          'currentPage':1,
          'pageSize':999
        });
      },
    }
</script>

<style lang="css" scoped>
  .demo-drawer-footer{
    width: 100%;
    position: relative;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }
</style>
